import { Popover, Button, Switch, DatePicker, Space, Checkbox, Input, Select, InputNumber, Slider, Row, Col } from 'antd';
import { CloseOutlined, CheckOutlined } from '@ant-design/icons';
import head from "./css/detailmore.module.css";
import Area from "../components/area.tsx";
import Shuxing from "./shuxing"
import { useState, useEffect } from 'react';
import Topnav from "../../../components/Rednav"

const { RangePicker } = DatePicker;/* 时间控件 */


const text = <span>Title</span>;
const content = (
    <div>
        <div>免费取消
            <p>入住24小时前可免费取消</p>
        </div>
        <div>
            <Switch
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
                defaultChecked
            />

        </div>
    </div>
);
const text1 = <span>Title1</span>;
const contentfangyuan = (
    <div>
        <div>
            <div>
                <Checkbox >
                    <p>整个房源</p>
                    <p>独享所有空间,无需与他人共用</p>
                </Checkbox>
            </div>
            <div>
                <Checkbox >
                    <p>独立房间</p>
                    <p>有自己的单独卧室,与他人共享其他空间</p>
                </Checkbox>
            </div>
            <div>
                <Checkbox >
                    <p>合住房间</p>
                    <p>与他人共享卧室以及其他空间</p>
                </Checkbox>
            </div>

            <div>
                <Button type="text">取消</Button>
                <Button type="text">重置</Button>
                <Button type="primary" style={{ marginLeft: "20%" }}>确定</Button>
            </div>

        </div>
        <div>

        </div>
    </div>
);
const { Option } = Select;
/* 闪订 */
const flashOrder = <span>闪订</span>;
const contentflash = (
    <div>
        <div>闪订
            <span>无需等待房东确认，即刻预定心仪房源</span>
            <span> <Switch
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
                defaultChecked
            /></span>
        </div>

        <div>
            <Button type="text">取消</Button>
            <Button type="primary" style={{ marginLeft: "50%" }}>确定</Button>
        </div>

    </div>
);




const buttonWidth = 70;
/* onChange={onChange}
onChange={onChange}
onChange={onChange} */
function HeadNav(props) {
    function onChange(e) {
        console.log(`checked = ${e.target.checked}`);
    }
    const [definput, setdefinput] = useState(1)


    const textPrice = <span>价格</span>;
    const changePrice = value => {
        // console.log(value);
        setdefinput(value);
    };


    const [diDian, setdiDian] = useState("")
    const getDidian = (el) => {
        setdiDian(el)
    }
    const contentarea = (
        <Area fn={getDidian} cityname={props.cityname} />
    )
    useEffect(() => {
        props.fn(diDian)
    }, [diDian])


    const contentPrice = (
        <div>
            <Input.Group compact>
                <Select defaultValue="1">
                    <Option value="1">Between</Option>
                </Select>
                <Input style={{ width: 100, textAlign: 'center' }} placeholder="Minimum" />
                <Input
                    className="site-input-split"
                    style={{
                        width: 30,
                        borderLeft: 0,
                        borderRight: 0,
                        pointerEvents: 'none',
                    }}
                    placeholder="~"
                    disabled
                />
                <Input
                    className="site-input-right"
                    style={{
                        width: 100,
                        textAlign: 'center',
                    }}
                    placeholder="Maximum"
                />
            </Input.Group>
            {/* 滑块 */}
            <Row>
                <Col span={12}>
                    <Slider
                        min={1}
                        max={20}
                        value={typeof definput === 'number' ? definput : 0}
                        onChange={changePrice}
                    />
                </Col>

            </Row>

        </div>
    );
    return (<div>
        <div className={head.topsarch}>
            <Topnav />
        </div>
        <div className={head.topnav}>
            <div className="demo" >
                <div style={{ display: "flex", justifyContent: 'flex-start', position: "relative", top: "20%", marginLeft: "20px", clear: 'both', whiteSpace: 'nowrap' }}>
                    {/* <Popover className={head.myhover} placement="bottomLeft" title={text} content={content} trigger="click">
                        <Button>日期</Button>
                    </Popover> */}
                    {/* <Popover className={head.myhover} placement="bottomLeft" title={text} content={content} trigger="click">
                        <Button>人数</Button>
                    </Popover> */}
                    <Space size={12}>
                        <RangePicker />
                    </Space>
                    <Shuxing />
                    <Popover className={head.myhover, head.jianju} placement="bottomLeft" title={text} content={content} trigger="click">
                        <Button>可免费取消</Button>
                    </Popover>
                    <Popover className={head.myhover, head.jianju} placement="bottomLeft" title={text1} content={contentfangyuan} trigger="click">
                        <Button>房源类型</Button>
                    </Popover>
                    <Popover className={head.myhover, head.jianju} placement="bottomLeft" content={contentarea} trigger="click">
                        <Button>位置区域</Button>
                    </Popover>
                    <Popover className={head.myhover, head.jianju} placement="bottomLeft" title={textPrice} content={contentPrice} trigger="click">
                        <Button>价格</Button>
                    </Popover>
                    <Popover className={head.myhover, head.jianju} placement="bottomLeft" title={text} content={content} trigger="click">
                        <Button>爱彼迎Plus</Button>
                    </Popover>
                    <Popover className={head.myhover, head.jianju} placement="bottomLeft" title={flashOrder} content={contentflash} trigger="click">
                        <Button>闪订</Button>
                    </Popover>
                    <Popover className={head.myhover, head.jianju} placement="bottomLeft" title={text} content={content} trigger="click">
                        <Button>更多筛选条件</Button>
                    </Popover>
                    {/* 开关按钮靠右侧 */}
                    <div className={head.jianju}>
                        <Switch style={{ marginLeft: "230px", height: "30px", backgroundColor: "#222222" }} checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
                    </div>
                </div>
            </div>,

        </div>

    </div>

    );
}

export default HeadNav;


